import React, {Component} from "react";
import {connect} from "dva";
import time, {convertDateFromString, currentTime, dateFormat} from "@/utils/time";
import echarts from "echarts";
import {addResizeHook} from "@/utils/resize";
import {PageHeaderWrapper} from "@ant-design/pro-layout";
import {Card, Col, Row, DatePicker, Modal} from "antd";
import moment from "moment";
import {trigger} from "@/utils/utils";
import {Table, Tag, Divider} from 'antd';
import ItemDetail from "@/pages/GaoLu/components/ItemDetail";
import HistoryHistogram from './historyHistogram'
import styles from './index.less';
import {getLatestTime} from "@/services/indicator";



const {Column, ColumnGroup} = Table;


const {RangePicker} = DatePicker;


class AreaTemp extends Component {

  colors = ['#5793f3', '#d14a61', '#675bba']

  state = {
    selectedTime: currentTime(),
    currentTime: null,
    data: [],
    chart: null,
    visible: false,
    selected: null
    // defaultTimeSpan: 8,

  };

  stopLoop = false;


  async componentDidMount() {

    const resp = await getLatestTime({
      itemName: "LuGang",
    });
    const {start,end,current} = resp.detail
    let startTime = convertDateFromString(start)
    let endTime = convertDateFromString(end)
    let currentTime = convertDateFromString(current)

    this.setState({selectedTime:currentTime})

    const {dispatch} = this.props;
    dispatch({
      type: 'lugang/getTemp',
      payload:{"time":dateFormat(currentTime)}
    });
  }


  timePick = (value) => {
    this.state.selectedTime = value.toDate();

    this.props.dispatch({
      type: 'lugang/getTemp',
      payload:{"time":dateFormat(this.state.selectedTime)}
    });
  };


  render() {
    const {
      width = 100,
      height = 350,
      temp
    }
      = this.props;

    const {selectedTime} = this.state;
    const dateFormat = 'YYYY-MM-DD HH';
    return (
      <div className="sheet">

        <DatePicker
          showTime
          format={dateFormat}
          placeholder="选择时间"
          defaultValue={moment(selectedTime, dateFormat)}
          key={Math.random()}
          onOk={this.timePick}
          style={{marginBottom:8}}
        />

        <Table dataSource={temp} size="small">
          <ColumnGroup title="高度">
            <Column title="  " dataIndex="tag" key="tag"/>
          </ColumnGroup>
          <ColumnGroup title="0-90" className={styles.head}>
            <Column title="0-45" dataIndex="group1" className={styles.body1} align="center" key="group1"
                    render={tags => (
                      <span>
                        {tags.map(tag => (
                          <Tag color= {tag.color} key={tag.index} onClick={() => {
                            this.setState({
                              visible: true,
                              selected: tag.name
                            })
                          }}>
                            {tag.index}
                          </Tag>
                        ))}</span>)}
            />
            <Column title="45-90" dataIndex="group2" className={styles.body2} align="center" key="group2"
                    render={tags => (
                      <span>
                        {tags.map(tag => (
                          <Tag color= {tag.color} key={tag.index} onClick={() => {
                            this.setState({
                              visible: true,
                              selected: tag.name
                            })
                          }}>
                            {tag.index}
                          </Tag>
                        ))}</span>)}
            />
          </ColumnGroup>
          <ColumnGroup title="90-180" className={styles.head}>
            <Column title="90-135" dataIndex="group3" className={styles.body1} align="center" key="group3"
                    render={tags => (
                      <span>
                        {tags.map(tag => (
                          <Tag color= {tag.color} key={tag.index} onClick={() => {
                            this.setState({
                              visible: true,
                              selected: tag.name
                            })
                          }}>
                            {tag.index}
                          </Tag>
                        ))}</span>)}
            />
            <Column title="135-180" dataIndex="group4" className={styles.body2} align="center" key="group4"
                    render={tags => (
                      <span>
                        {tags.map(tag => (
                          <Tag color= {tag.color} key={tag.index} onClick={() => {
                            this.setState({
                              visible: true,
                              selected: tag.name
                            })
                          }}>
                            {tag.index}
                          </Tag>
                        ))}</span>)}
            />
          </ColumnGroup>
          <ColumnGroup title="180-270" className={styles.head} >
            <Column title="180-225" dataIndex="group5"  className={styles.body1} align="center" key="group5"
                    render={tags => (
                      <span>
                        {tags.map(tag => (
                          <Tag color= {tag.color} key={tag.index} onClick={() => {
                            this.setState({
                              visible: true,
                              selected: tag.name
                            })
                          }}>
                            {tag.index}
                          </Tag>
                        ))}</span>)}
            />
            <Column title="225-270" dataIndex="group6" className={styles.body2} align="center" key="group6"
                    render={tags => (
                      <span>
                        {tags.map(tag => (
                          <Tag color= {tag.color} key={tag.index} onClick={() => {
                            this.setState({
                              visible: true,
                              selected: tag.name
                            })
                          }}>
                            {tag.index}
                          </Tag>
                        ))}</span>)}
            />
          </ColumnGroup>

          <ColumnGroup title="270-0" className={styles.head}>
            <Column title="270-315" dataIndex="group7" className={styles.body1} align="center" key="group7"
                    render={tags => (
                      <span>
                        {tags.map(tag => (
                          <Tag color= {tag.color} key={tag.index} onClick={() => {
                            this.setState({
                              visible: true,
                              selected: tag.name
                            })
                          }}>
                            {tag.index}
                          </Tag>
                        ))}</span>)}
            />
            <Column title="315-0" dataIndex="group8" className={styles.body2} align="center" key="group8"
                    render={tags => (
                      <span>
                        {tags.map(tag => (
                          <Tag color= {tag.color} key={tag.index} onClick={() => {
                            this.setState({
                              visible: true,
                              selected: tag.name
                            })
                          }}>
                            {tag.index}
                          </Tag>
                        ))}</span>)}
            />
          </ColumnGroup>
        </Table>

        <Modal
          width="35%"
          // title="分数详情"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={() => {
            this.setState({
              visible: false,
            })
          }}
        >
          <HistoryHistogram ind={this.state.selected} time={this.state.selectedTime}/>
        </Modal>
      </div>
    );
  }
}

export default connect(({lugang, global}) => ({
  temp: lugang.temp,
  global
}))
(AreaTemp);
